<template>
	<view>
		<uv-swiper :list="list" @change="e => current = e.current" indicatorStyle="right: 10px;top: 10px"
			:autoplay="false" :radius="0" imgMode="aspectFit" :height="height" bgColor="#fff">
			<template v-slot:indicator>
				<view class="indicator-num">
					<text class="indicator-num__text">{{ current + 1 }}/{{ list.length }}</text>
				</view>
			</template>
		</uv-swiper>
	</view>
</template>

<script>
	export default {
		name: "custom-swiper",
		data() {
			return {

			};
		}
	}
</script>
<script setup>
	import {
		ref
	} from "vue";
	const current = ref(0);
	defineProps({
		list: {
			type: Array,
			default: []
		},
		height: {
			type: Number,
			default: 400
		}
	})
</script>

<style lang="scss" scoped>
	.indicator-num {
		padding: 4px 6px;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		justify-content: center;
		display: flex;
		flex-direction: row;

		&__text {
			color: #FFFFFF;
			font-size: 13px;
		}
	}
</style>